var lis = document.getElementById('ul1').children;
console.log(1)
var button = document.getElementById('ul2').children;
var left = document.getElementById('left'),
    right = document.getElementById('right');
var index = 0;
var dinghsiqi;
dingshi();
(function () {
    lis[0].style.cssText = 'opacity:1';
    button[0].style.cssText = 'background-color:#9B9BFF;color:#fff;';
}())
function forin() {
    for (var i = 0; i < lis.length; i++) {
        lis[i].style.cssText = 'opacity:0';
        button[i].style.cssText = 'background-color:#fff;color:#000;';
    }
    lis[index].style.cssText = 'opacity:1';
    button[index].style.cssText = 'background-color:#9B9BFF;color:#fff;';
}
function dingshi() {
    dingshiqi = setInterval(function () {
        index++;
        if (index == lis.length) {
            index = 0;
        }
        forin();
    }, 3000);
}
left.onclick = function () {
    clearInterval(dingshiqi);
    index--;
    if (index < 0) {
        index = lis.length - 1;
    }
    forin();
    dingshi();
}
right.onclick = function () {
    clearInterval(dingshiqi);
    index++;
    if (index > lis.length - 1) {
        index = 0;
    }
    forin();
    dingshi();
}
for (let i = 0; i < button.length; i++) {
    button[i].onclick = function () {
        index = i;
        clearInterval(dingshiqi);
        forin();
        dingshi();
    }
}
